<!doctype html>
<html lang="zh-CN">
<head>
    <!-- 必须的 meta 标签 -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap 的 CSS 文件 -->
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/font-awesome.min.css">

    <title>Hello, world!</title>
</head>
<body>


<div id="app">

    <table class="table">
        <thead>
        <tr>
            <th>ID</th>
            <th>姓名</th>
            <th>邮件</th>
            <th>电话</th>
            <th>信用度</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="item in userList" :key="item.u_id">
            <td>{{item.u_id}}</td>
            <td>{{item.u_name}}</td>
            <td>{{item.email}}</td>
            <td>{{item.phone}}</td>
            <td>{{item.credit}}</td>
            <td>
                <button type="button" class="btn btn-link"  @click="execDel(item)" >删除</button>
            </td>
        </tr>
        </tbody>
    </table>

    


</div>


<script src="js/jquery-3.6.0.slim.min.js"></script>
<script src="js/bootstrap.bundle.min.js"></script>
<script src="js/vue.global.js"></script>
<script src="js/axios.min.js"></script>
<script src="js/my-axios.js"></script>
<script src="layer/layer.js"></script>

<script>


    //定义vue应用配置
    const app = {
        //data函数专门用来定义数据
        data() {
            return {
                updIdx:null,
                userList: [],//教师列表数据

            };
        },

        //定义方法
        methods: {

            //获取数据
            getUserList(){
                //向服务端接口http://localhost:8888/jd_demo_server_war_exploded/tea/teaList，发出get请求

                myAxios.get('/admin/deleteuser').then((response) => {

                    this.userList = response.data.data;
                });
            },
            
            execDel(item){

                myAxios.post('/admin/deleteuser',item.u_id).then(res=>{
                    layer.close(idx);
                    if(res.data.success){
                        this.getUserList();
                        layer.close(this.updIdx);
                        layer.msg('删除信息成功！',{icon:1});
                    }else{
                        layer.msg(res.data.message,{icon:2});
                    }
                }).catch(err=>{
                    layer.close(idx);
                    layer.msg('删除信息失败！',{icon:2});
                });
            }
        },

        //定义回调方法：mounted 该方法在页面渲染完成立即执行
        mounted() {
            this.getUserList();
        }
    };

    Vue.createApp(app).mount('#app')

</script>


</body>
</html>